Vue 3 Development with the PrimeVue Framework — Customized Buttons

PrimeVue is a UI framework that’s compatible with Vue 3.

In this article, we’ll look at how to get started with developing Vue 3 apps with PrimeVue.

Button Events

We can listen to events like clicks on the button.

For instance, we can write:

<template>
  <div>
    <Button label="alert" @click="onClick" />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {};
  },
  methods: {
    onClick($event) {
      alert(JSON.stringify($event));
    },
  },
};
</script>

to listen to the click event with the @click directive.

Button Styles

We can add buttons with preset styles by adding one of the following classes:

• .p-button-secondary
• .p-button-success
• .p-button-info
• .p-button-warning
• .p-button-help
• .p-button-danger

For example, we can write:

<template>
  <div>
    <Button label="Secondary" class="p-button-secondary" />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {};
  },
  methods: {},
};
</script>

to add the style.

Text Buttons

We can add text buttons by adding the p-button-text class:

<template>
  <div>
    <Button label="Submit" class="p-button-text" />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {};
  },
  methods: {},
};
</script>

The button won’t have a background color and the text has the color that the background color would have in a regular button.

Outlined Button

We can add an outlined button with the p-button-outlined class:

<template>
  <div>
    <Button label="Primary" class="p-button-outlined" />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {};
  },
  methods: {},
};
</script>

Link Button

The p-button-link class make the button a link:

<template>
  <div>
    <Button label="Link" class="p-button-link" />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {};
  },
  methods: {},
};
</script>

Buttons with Badges

We can add buttons with badges with a few props:

<template>
  <div>
    <Button
      type="button"
      label="Messages"
      icon="pi pi-users"
      class="p-button-warning"
      badge="8"
      badgeClass="p-badge-info"
    />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {};
  },
  methods: {},
};
</script>

badge has the content for the badge.

icon has the icon classes.

badgeClass has the classes to apply to the badge.

Button Set

We can add a button set with the p-buttonset class:

<template>
  <div>
    <span class="p-buttonset">
      <Button label="Save" icon="pi pi-check" />
      <Button label="Delete" icon="pi pi-trash" />
      <Button label="Cancel" icon="pi pi-times" />
    </span>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {};
  },
  methods: {},
};
</script>

Button Sizes

We can change button sizes with one of the following classes:

• p-button-sm
• p-button
• p-button-lg

sm is small and lg is large. No suffix is normal size.

For example, we can add a large button by writingL

<template>
  <div>
    <Button label="Large" icon="pi pi-check" class="p-button-lg" />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {};
  },
  methods: {},
};
</script>

Custom Button Content

We can add custom button content into the default slot:

<template>
  <div>
    <Button> Custom Content </Button>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {};
  },
  methods: {},
};
</script>

Conclusion

We can add buttons with various styles into our Vue 3 app with PrimeVue.